<template>
  <hips-view content-frozen>
    <hips-nav-bar
      slot="header"
      title="Slide 轮播"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <hips-sticky
      :position="scrollY"
      class="demo-sticky"
    >
      <hips-scroll
        ref="scroll"
        :scroll-events="['scroll']"
        :scroll-options="scrollOptions"
        @scroll="scrollHandler"
      >
        <ul>
          <li>Top</li>
        </ul>

        <hips-sticky-ele ele-key="sticky1">
          <ul class="sticky-header">
            <li>sticky el 1</li>
          </ul>
        </hips-sticky-ele>
        <ul>
          <li
            v-for="(item, index) in items"
            :key="index"
            class="hips-thinline--bottom"
          >
            {{ item }}
          </li>
        </ul>

        <hips-sticky-ele ele-key="sticky2">
          <ul class="sticky-header">
            <li>sticky el 2</li>
          </ul>
        </hips-sticky-ele>
        <ul>
          <li
            v-for="(item, index) in items"
            :key="index"
            class="hips-thinline--bottom"
          >
            {{ item }}
          </li>
        </ul>

        <hips-sticky-ele ele-key="sticky3">
          <ul class="sticky-header">
            <li>sticky el 3</li>
          </ul>
        </hips-sticky-ele>
        <ul>
          <li
            v-for="(item, index) in items"
            :key="index"
            class="hips-thinline--bottom"
          >
            {{ item }}
          </li>
        </ul>
      </hips-scroll>

      <template
        slot="fixed"
        slot-scope="props"
      >
        <ul class="sticky-header">
          <li>{{ props.currentValue }}</li>
        </ul>
      </template>
    </hips-sticky>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Sticky, StickyEle, Scroll } from '@hips/vue-ui';
export default {
  components: {
    [Sticky.name]: Sticky,
    [StickyEle.name]: StickyEle,
    [Scroll.name]: Scroll,
  },
  mixins: [ BasicView ],
  data() {
    return {
      scrollY: 0,
      items: [
1, 2, 3, 4, 5, 6, 7, 8, 9,
],
      scrollOptions: {
        scrollbar: false,
      },
    };
  },

  mounted() {},

  methods: {
    scrollHandler(pos) {
      this.scrollY = -pos.y;
    },
  },
};
</script>

<style lang="stylus">
// .demo-sticky
//   padding-bottom: 0 !important
//   min-height: 0 !important
//   height: calc(100vh -  44px)
//   padding: 0
//   position: absolute
//   top: 44px
//   bottom: 0
//   left: 0
//   width: 100%
//   overflow hidden
//   text-align: center
  li
    padding: 20px 10px
  .sticky-header
    background-color: #eee
    color: #1f8ceb
  .hips-sticky
    .hips-scroll
      background-color: #fff
  .hips-sticky__fixed
    .sticky-header
      background: #1f8ceb
      color: white
</style>
